import React,{useState} from "react";
import './index.less'
import { useNavigate, useLocation, useParams } from 'react-router-dom';

import utils from '../../util/utils'

function LessonCard(props){
  const navigate = useNavigate ();
  
  const [lesson,setLesson] = useState({
    Id:'1',
    Title:"Web前端开发JavaScript高薪课堂啊啊Web前端b前端开发JavaScript高薪课堂",
    UserId:"1",
    User:{
      Id:"1",
      AvatarUrl:"https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLAf1icyicZicuHUIBe2zic6UiaCwA4ekE7QJdGicagv0WIHBOt6cvuAI2LibupjCZKrdns5fI/356",
      Nickname:"小范范范范范范范范范范"
    },
    ImgUrl:"https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLAf1icyicZicuHUIBe2zic6UiaCwA4ekE7QJdGicagv0WIHBOt6cvuAI2LibupjCZKrdns5fI/356",
    ChapterCount:10,
    ClassHourCount:80,
    Description:"描述描述描述描述描述描述描述描述描述描述描述描述",
    IsEnd:true,
    Count:{
      LikeCount:520,
      CollectCount:1000,
      VisitCount:12321,
      CommentCount:68,
      ResourceId:'1',
      ResourceType:2
    }
  })

  const goLessonDetail = ()=>{
    navigate(`/LessonDetail/${lesson.Id}`)
  }

  const goUserDetail = (e)=>{
    e.stopPropagation()
    navigate(`/UserDetail/${lesson.User.Id}`)
  }

  return (
    <React.Fragment>
      <div className="lesson-card" onClick={(e)=>goLessonDetail(e)}>
          <div className="lesson-head">
            <img src={lesson.ImgUrl} alt="" className="lesson-img"/>
            <div className="lesson-VisitCount count">
              <i className="iconfont icon-shipin"></i>
              {lesson.Count.VisitCount}
            </div>
            <div className="lesson-ClassHourCount count">
              {lesson.ClassHourCount}节
            </div>

            <div className="lesson-CommentCount count">
              <i className="iconfont icon-31pinglun"></i>
              {lesson.Count.CommentCount}
            </div>
          </div>
          <div style={{padding:'6px'}}>
              <h3 className="lesson-title">
                {lesson.Title}
              </h3>
              <p className="lesson-description">
                {lesson.Description}
              </p>

              <div className="flex">
                <div className="lesson-author" title={lesson.User.Nickname} onClick={(e)=>goUserDetail(e)}>
                  <i className="iconfont icon-UPzhu"></i>
                  {lesson.User.Nickname}
                </div>
                
                <div className="lesson-LikeCount">
                  <span>
                    {lesson.Count.LikeCount}点赞
                  </span>
                </div>
              </div>
          </div>

          
        
          {/* <div className="lesson-CollectCount">
              {lesson.Count.CollectCount}
          </div> */}
          
          
      </div>
    </React.Fragment>
  )
}

export default LessonCard